<template>
    <Content title="验收">
        <view class="container">
            <view class="content">
                <u-form labelPosition="left" :model="model" labelWidth="160" labelAlign="left" :rules="rules"
                    ref="uForm">
                    <view class="title">维修评分</view>
                    <u-form-item label="服务态度评分：" prop="serviceAttitudeScore" required>
                        <uni-rate :max="5" v-model="model.serviceAttitudeScore" />
                    </u-form-item>
                    <u-form-item label="技术能力评分：" prop="technicalSkillsScore" required>
                        <uni-rate :max="5" v-model="model.technicalSkillsScore" />
                    </u-form-item>
                    <u-form-item label="响应速度评分：" prop="responseSpeedScore" required>
                        <uni-rate :max="5" v-model="model.responseSpeedScore" />
                    </u-form-item>
                    <view class="title">维修结果</view>
                    <u-form-item label="响应速度评分：" prop="repairResult" required>
                        <u-radio-group class="box-input" v-model="model.repairResult" placement="column">
                            <u-radio label="维修完成，设备正常" name="1" style="margin-bottom: 20px"></u-radio>
                            <u-radio label="维修完成，有待观察" name="3" style="margin-bottom: 20px"></u-radio>
                            <u-radio label="维修未完成" name="2"></u-radio>
                        </u-radio-group>
                    </u-form-item>
                    <u-form-item v-if="model.repairResult=='3'" label="有待观察天数：" prop="observeDays" required>
                        <MyNumber label v-model.number="model.observeDays" :min="1" :max="30" placeholder="请填写">
                        </MyNumber>
                    </u-form-item>
                    <u-form-item v-if="model.repairResult=='2'" label="维修未完成原因：" prop="unqualifiedReason" required>
                        <u-input label v-model="model.unqualifiedReason" :maxlength="100" placeholder="请填写"></u-input>
                    </u-form-item>
                </u-form>
            </view>
        </view>
        <view class="btn-v">
            <view class="but-box">
                <u-button class="btn" @click="close" text="取消"></u-button>
                <u-button class="btn" type="primary" @click="submit" text="确定"></u-button>
            </view>
        </view>
    </Content>
</template>

<script>
    import Content from "@/components/content/index.vue";
    import MyNumber from "@/components/MyNumber";
    import fetch from "@/utils/fetch";
    export default {
        components: {
            Content,
            MyNumber
        },
        data() {
            return {
                id: "",
                model: {
                    serviceAttitudeScore: "",
                    technicalSkillsScore: "",
                    responseSpeedScore: "",
                    repairResult: "",
                },
                rules: {
                    serviceAttitudeScore: {
                        type: "number",
                        required: true,
                        message: "请填写",
                        trigger: "change",
                    },
                    technicalSkillsScore: {
                        type: "number",
                        required: true,
                        message: "请填写",
                        trigger: "change",
                    },
                    responseSpeedScore: {
                        type: "number",
                        required: true,
                        message: "请填写",
                        trigger: "change",
                    },
                    repairResult: {
                        required: true,
                        message: "请填写",
                        trigger: "change",
                    },
                    observeDays: {
                        type: "number",
                        required: true,
                        message: "请填写",
                        trigger: "change",
                    },
                    unqualifiedReason: {
                        required: true,
                        message: "请填写",
                        trigger: "change",
                    },
                },
            };
        },
        onLoad: function(option) {
            //option为object类型，会序列化上个页面传递的参数
            this.id = parseInt(option.id);
        },
        onShow: function() {},
        mounted() {},
        methods: {
            close() {
                uni.navigateBack({
                    delta: 1, //返回上一页
                });
            },
            submit() {
                const that = this;
                that.$refs.uForm.validate().then((valid) => {
                    if (valid) {
                        that.$loading.open();
                        fetch("post", "/dms/deviceMaintenanceWorkOrder/checkAndAccept", {
                            id: this.id,
                            ...this.model,
                        }).then((res) => {
                            uni.$emit("openToast", {
                                type: "success",
                                title: "验收成功",
                                complete() {
                                    uni.navigateBack({
                                        delta: 1, //返回上一页
                                    });
                                },
                            });
                        });
                    }
                });
            },
        },
    };
</script>

<style scoped lang="scss">
    .container {
        padding: 40rpx;
        background-color: #fff;
        min-height: 100%;
        overflow: auto;
        display: flex;
        flex-direction: column;
        padding-bottom: 150rpx;

        /deep/ .u-form-item__body__left__content__label {
            margin-left: 20rpx;
        }

        /deep/ .uni-select__input-placeholder {
            color: #cbc9cc !important;
            font-size: 15px !important;
        }
    }

    .content {
        padding: 30rpx 30rpx;
        background-color: #ffffff;
        border-radius: 5px;
        box-shadow: 0 12rpx 18rpx -6rpx rgba(0, 0, 0, 0.2);
        margin-bottom: 20rpx;

        .title {
            font-size: 30rpx;
            font-weight: bold;
            margin: 40rpx 0 20rpx;

            &:first-child {
                margin-top: 0;
            }
        }
    }
</style>